<template>
	<van-tabbar route :border="false" inactive-color="#737880" active-color="#F53D7D">
		<template v-for="item of state.tabbar" :key="item.text">
			<van-tabbar-item replace :to="item.path">
				<span>{{ item.text }}</span>
				<template #icon="row">
					<img :src="row.active ? item.active : item.icon" />
				</template>
			</van-tabbar-item>
		</template>
	</van-tabbar>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

interface IstateData {
	tabbar: tabber[];
}
interface tabber {
	text: string;
	path: string;
	icon: string;
	active: string;
}

const state: IstateData = reactive({
	tabbar: [
		{
			text: '用户',
			path: '/index',
			icon: new URL('../assets/img/tabbar/user.png', import.meta.url).href,
			active: new URL('../assets/img/tabbar/user-active.png', import.meta.url).href
		},
		{
			text: '红娘',
			path: '/matchmaker',
			icon: new URL('../assets/img/tabbar/matchmaker.png', import.meta.url).href,
			active: new URL('../assets/img/tabbar/matchmaker-active.png', import.meta.url).href
		},
		{
			text: '栏目',
			path: '/category',
			icon: new URL('../assets/img/tabbar/category.png', import.meta.url).href,
			active: new URL('../assets/img/tabbar/category-active.png', import.meta.url).href
		},
		{
			text: '门店',
			path: '/stores',
			icon: new URL('../assets/img/tabbar/stores.png', import.meta.url).href,
			active: new URL('../assets/img/tabbar/stores-active.png', import.meta.url).href
		},
		{
			text: '我的',
			path: '/my',
			icon: new URL('../assets/img/tabbar/my.png', import.meta.url).href,
			active: new URL('../assets/img/tabbar/my-active.png', import.meta.url).href
		}
	]
});
</script>

<style lang="scss" scoped>
:deep(.van-tabbar) {
	box-shadow: 0px -7px 11px 0px #f0f0f0;
}
</style>
